<template>
	<view class="main">
		<view class="advice_type">
			<view class="title">- 投诉类型 -</view>
			<view class="content">
				<view v-for="item in adviceTypeList" @click="chooseType(item)" :class="{active:adviceType==item}">{{item}}</view>
			</view>
		</view>
		<view class="advice_content">
			<view class="title">- 投诉内容 -</view>
			<textarea value="" placeholder="投诉内容" placeholder-style="font-size:28rpx;color:#b6c2ce;" @input="adviceCon"/>
			<view class="submit-btn" @click="submit">立即提交</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					adviceType:"",
					adviceContent:'',
					Mendian_id:'',
					adviceTypeList:[
						'服务多收钱',
						'拒绝用券',
						'服务质量差',
						'服务态度差',
						'门店信息有误',
						'其他',
						]
				}
			},
			components: {

			},
			onLoad(option) {
				this.Mendian_id = option.id;
			},
			methods: {
				//选择投诉类型
				chooseType(res){
					this.adviceType = res;
					console.log(res)
				},
				//填写投诉内容
				adviceCon(e) {
					this.adviceContent = e.detail.value;
					console.log(this.adviceContent);
				},
				//提交投诉
				submit() {
					if(this.adviceType == '') {
						uni.showToast({
							title:'请选择投诉类型',
							icon: 'none'
						})
						return
					}
					if(this.adviceContent == '') {
						uni.showToast({
							title:'请输入投诉内容',
							icon: 'none'
						})
						return
					}
						this.$get('customer_tousu.ashx',{
							id:uni.getStorageSync('userId'),
							Mendian_id: this.Mendian_id,
							Tslx: this.adviceType,
							Tsnr: this.adviceContent
						},(res)=>{
							if(res.result == 1) {
								uni.showModal({
									title:'提示',
									content:'您已投诉成功，平台会尽快处理!',
									confirmText:'确定',
									cancelText:'取消',
									success(res1) {
										if(res.data == 1) {
											uni.showToast({
											   title: '提交成功！',
											});
											uni.navigateBack()
										}else{
											uni.showToast({
											   title: '提交失败！',
											});
										}
									}
								})
							}
						})
					}
				}
				
			}
	</script>
</script>

<style>
	.advice_type {
		width: 750rpx;
		height: 298rpx;
		background: #fff;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
	}
	.title {
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		color: #999;
		font-size: 24rpx;
		padding-top: 10rpx;
	}
	.content {
		padding: 10rpx 6rpx;
		box-sizing: border-box;
	}
	.content view {
		width: 210rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		background: #f2f2f2;
		display: inline-block;
		border-radius: 30rpx;
		margin: 13rpx 18rpx;
		
	}
	.content view.active{
		color: #fff;
		background-color: #007AFF;
	}
	.advice_content {
		width: 750rpx;
		height: 520rpx;
		background: #fff;
	}
	.advice_content textarea {
		width: 660rpx;
		height: 200rpx;
		margin: 0 auto;
		background: #f5f6f7;
		padding: 24rpx 27rpx;
		border-radius: 10rpx;
	}
	.submit-btn {
		width: 540rpx;
		height: 84rpx;
		line-height: 84rpx;
		margin: 60rpx auto 0;
		border-radius: 10rpx;
		background: #008afd;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
	}
</style>
